<template>
    <div >
        <div id="cesiumContainer">
            <div id="slider"></div>
            <div id="infoasd" style="position: absolute; left: 0px; top: 0px;z-index:3;display:none;">
                <h1 style="width:200px;height:200px;border:1px solid #ddd;background:;">chuxian</h1>
            </div>
            <!-- 控制显隐div -->
            <div v-if="false">
                <!-- 循环div -->
                <div id="popup-fylzCity-II-8" class="cesium-popup" style="z-index: 1; position: absolute; transform: translate3d(759.64px, 265.575px, 0px); display: block;">
                    <div class="cesium-popup-content-wrapper" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; color: rgb(255, 255, 255); overflow: inherit;">
                        <div id="fuyangProvinceMarker" class="cesium-popup-content"><div style="float: left; user-select: none;">
                            <div>
                                <span style="font-size: 23px;">1294</span>
                                <span>/3450</span>
                            </div>
                            <div data-cityx="item.x" data-cityy="item.y" data-name="item.name" class="cityName">
                                <div class="cityNameClick" style="color: white; text-decoration: none; margin-bottom: 5px;">
                                    <span style="font-size: 20px; display: inline-block; width: 100%; pointer-events: auto; background: linear-gradient(270deg, rgba(13, 131, 214, 0) 0%, rgb(50, 243, 169) 100%);">杭州 </span>
                                    </div>
                                </div>
                                <div class="henqingxin" style="background: rgb(50, 243, 169);">清新</div>
                                </div>
                                <div style="float: left; width: 80px; margin-top: 36px;">
                                    <div style="float: left; width: 25px; height: 1px; background: rgb(50, 243, 169);"></div>
                                    <div style="float: left; width: 30px; height: 1px; transform-origin: left center; transform: rotate(30deg); background: rgb(50, 243, 169);"></div>
                                    </div>
                                    <div class="levelCir" style="background: rgb(50, 243, 169);">II</div>
                                    <div id="cubes" style="float: left;"><div class="wrap">
                                    <div class="cube" style="transform: rotate(180deg);">
                                        <div class="front" style="opacity: 0.4; background: rgb(50, 243, 169); height: 100px;"></div>
                                        <div class="back" style="opacity: 0.2; background: rgb(50, 243, 169); height: 100px;"></div>
                                        <div class="top" style="background: rgb(50, 243, 169); height: 100px;"></div>
                                        <div class="bottom" style="background: rgb(50, 243, 169); transform: rotateX(90deg) translateY(50px) translateZ(-75px);"></div>
                                        <div class="left" style="background: rgb(50, 243, 169); height: 100px;"></div>
                                        <div class="right" style="opacity: 0.2; background: rgb(50, 243, 169); height: 100px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex'
import axios from 'axios'
export default {
    name:"CesiumContainer",
    data(){
        return {
            pathPositions:[[98.876222,25.68233],[98.862628,25.797975],[98.840363,25.917915],[98.852617,26.029317],[98.865113,26.13877],[98.869566,26.252634],[98.892101,26.467632],[98.905972,26.591575],[98.896702,26.750242],[98.869112,26.924363],[98.868251,27.085623],[98.879576,27.196369],[98.895266,27.253962],[98.839266,27.369971],[98.816701,27.441779],[98.79145,27.585929],[98.725303,27.645634],[98.673294,27.750816],[98.669836,27.908485],[98.622953,28.020908]],
            preRenderListener:null,
            searchResult:false,
            eventDetail:false,
            value1: '',
            value2: '',
            value3:'',
            townList2020: [
                {
                name: "华埠镇",
                value: "91.85",
                rank: "4",
                lonLat:[118.349767, 29.016215]
                },
                {
                name: "桐村镇",
                value: "91.81",
                rank: "3",
                lonLat:[118.220322, 28.994596]
                },
                {
                name: "杨林镇",
                value: "90.03",
                rank: "4",
                lonLat:[118.141845, 29.058291]
                },
                {
                name: "音坑乡",
                value: "88.18",
                rank: "4",
                lonLat:[118.400480, 29.199826]
                },
                {
                name: "芹阳办事处",
                value: "89.92",
                rank: "4",
                lonLat:[118.413284, 29.12477]
                },
                {
                name: "中村乡",
                value: "87.14",
                rank: "4",
                lonLat:[118.337406, 29.218482]
                },
                {
                name: "林山乡",
                value: "91.52",
                rank: "4",
                lonLat:[118.505983, 29.144543]
                },
                {
                name: "池淮镇",
                value: "89.74",
                rank: "4",
                lonLat:[118.312342, 29.086472]
                },
                {
                name: "苏庄镇",
                value: "89.34",
                rank: "4",
                lonLat:[118.121256, 29.176933]
                },
                {
                name: "长虹乡",
                value: "91.27",
                rank: "4",
                lonLat:[118.227703, 29.237526]
                },
                {
                name: "马金镇",
                value: "89.01",
                rank: "4",
                lonLat:[118.413218, 29.302093]
                },
                {
                name: "村头镇",
                value: "89.91",
                rank: "4",
                lonLat:[118.491321, 29.280249]
                },
                {
                name: "齐溪镇",
                value: "86.92",
                rank: "4",
                lonLat:[118.317449, 29.431253]
                },
                {
                name: "何田乡",
                value: "88.25",
                rank: "4",
                lonLat:[118.315827, 29.331167]
                },
                {
                name: "大溪边乡",
                value: "87.96",
                rank: "4",
                lonLat:[118.575388, 29.290526]
                },
            ],
            i: Date.now()
        }
    },
    computed:{
        ...mapState("windowInfo",{
            infoBoxContent:"infoBoxContent"
        }),
    },
    mounted(){
        this.$cp.cesiumInit();
        // setTimeout(()=>{
        //     viewer.clock.onTick.addEventListener(this.rotate)
        // },4000) 
        //初始化默认位置
        this.$cp.initCesiumView(118.34419433834043,28.56285253571389,105594,6.23093119148499,-1.0038469512489798,0.0004426128132433149)
        //this.flyToKaihua();
        // var qxmoUrl = `http://127.0.0.1:8082/tileset.json`;
        //     var tileset = new Cesium.Cesium3DTileset({
        //         url: qxmoUrl
        //     });

        //     tileset.readyPromise.then(function(tileset) {
        //         viewer.scene.primitives.add(tileset);
        //         viewer.flyTo(tileset);
        //     }).otherwise(function(error) {
        //         console.log(error);
        //     });
        //this.$cp.initCesiumView(106.80200505633105,33.55050929729206,19353988,6.249719865709577,-1.5483460352640122,0)
        setTimeout(()=>{
            //this.flyToKaihua()
        },5000)
        axios.get('./data/县界.geojson').then(res=>{
            let datas = res.data.features[0].geometry.coordinates[0][0];
           
            // datas.forEach((element ,index)=> {
               this.$cp.addPloygonLine("xianjie",[].concat.apply([], datas), Cesium.Color.DARKTURQUOISE )
            // });
        })
        
        axios.get('./data/自然村.geojson').then(res=>{
            let datas = res.data.features;
            // datas.forEach((element ,index)=> {
            //     this.$cp.addOneyLabel('cun'+index, element.geometry.coordinates, element.properties.NAME, 'leftClick', this.leftClick) 
            // });
        })
        //this.getXy()
        
        
       
    
    },
    methods:{
        pLeftClick(entity){
            if(this.$cp.currentPolygon){
                this.$cp.currentPolygon.polygon.extrudedHeight = this.$cp.currentPolygonHeight
                this.$cp.currentPolygon.polygon.material = this.$cp.currentPolygonColor
                this.$cp.currentPolygon = null;
            }
            this.$cp.currentPolygonHeight = entity.polygon.extrudedHeight;
            this.$cp.currentPolygonColor = entity.polygon.material;
            this.$cp.currentPolygon = entity;
            this.$cp.currentPolygon.polygon.extrudedHeight = 1500
            this.$cp.currentPolygon.polygon.material =  Cesium.Color.fromCssColorString("#00FFFF").withAlpha(1)
        },
        getXy(){
            var that = this;
            this.handler3D = new Cesium.ScreenSpaceEventHandler( viewer.scene.canvas);
                this.handler3D.setInputAction(function(movement) {
                var pick= new Cesium.Cartesian2(movement.position.x,movement.position.y);
                if(pick){
                    var cartesian =  viewer.scene.globe.pick( viewer.camera.getPickRay(pick),  viewer.scene);
                    if(cartesian){
                        //世界坐标转地理坐标（弧度）
                        var cartographic =  viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                        if(cartographic){
                            //鼠标位置地球表面物体的真实海拔
                            var height = viewer.scene.globe.getHeight(cartographic);
                            //视角海拔高度
                            var he = Math.sqrt( viewer.scene.camera.positionWC.x *  viewer.scene.camera.positionWC.x +  viewer.scene.camera.positionWC.y *  viewer.scene.camera.positionWC.y +  viewer.scene.camera.positionWC.z *  viewer.scene.camera.positionWC.z);
                            var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                            //地理坐标（弧度）转经纬度坐标
                            var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                            if(!height){
                                height = 0;
                            }
                            let x = point[0].toFixed(6);  
                            let y = point[1].toFixed(6);
                            console.log(x+","+y)
                        }
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
        flyToKaihua(){
            let chinaOption = this.$cp.option(104.64403322648708,27.999620339635403,8638447,6.2497200196824,-1.5485518081441332,0);
            let zhejiangOption = this.$cp.option(119.66057403363476,28.771144149030214,1202256,6.249719885593937,-1.5483725028170174,0);
            let quzhouOption = this.$cp.option(118.78628837563434,28.808212736418078,444566,6.249719865709576,-1.5483460352640566,0);
            let kaihuaOption1 = this.$cp.option(118.28223641475519,29.18139428550394,146827,0.011780232825532977,-1.5360914885961012,0)
            let kaihuaOption = this.$cp.option(118.38982900070107,29.126264350579536,21249,6.283185307179586,-1.5688507228222393,0);
            let kaihuaOption2 = this.$cp.option(118.40457505177172,29.098935772482594,1686,6.2036306741620315,-0.25251545517064766,6.2829512917186925);
            viewer.camera.flyTo(chinaOption)
            chinaOption.complete = ()=>{
                viewer.camera.flyTo(zhejiangOption)
            }
            zhejiangOption.complete = ()=>{
                viewer.camera.flyTo(quzhouOption)
            }
            quzhouOption.complete = ()=>{
                viewer.camera.flyTo(kaihuaOption1)
            }
            kaihuaOption1.complete = ()=>{
                 viewer.camera.flyTo(kaihuaOption)
            }
            kaihuaOption.complete = ()=>{
                 viewer.camera.flyTo(kaihuaOption2)
            }
        },
        rotate() {
            var a = 0.1
            var t = Date.now()
            var n = (t - this.i) / 1e3
            this.i = t
            viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n)
        },
        ...mapMutations("windowInfo", { changeTabName: "changeTabName" }),
        hiddenSearch(){
            this.searchResult = false
        },
        addManyou(){
            let hosipitalShipPositon = [];
            const shipGroup = new GV.GraphicGroup();
            this.$cp.viewer.graphicLayer.add(shipGroup);
            // this.$cp.viewer.iCamera.flyTo(new GV.ViewPoint(98.876222,25.68233, 8000,
            //         354.2109524366, -29.3531104185, 0.0070661549), 0);
            let shipUnit = new GV.ModelGraphic({
                url: "./Cesium_Air.glb",
                position: new GV.GeoPoint(98.876222,25.68233,10000),
                scale: 0,
                clampToGround: false,
                heading: -15,
                pitch: 0
            });
            shipGroup.add(shipUnit);

            this.pathPositions.forEach((item,index)=>{
                let itemA = {
                    lon:item[0],
                    lat:item[1],
                    alt:1000
                }
                hosipitalShipPositon.push(itemA)
            })
            // const hosipitalShipPositon = new GV.Calculate.getBezier([shipGroup.children[1].position, { lon: 123.7979348613, lat: 26.9372833592, alt: 0 }, { lon: 125.3472385110, lat: 28.5239795345, alt: 0 }, { lon: 127.7541276253, lat: 32.0475495456, alt: 0 }], 20);
            const hosipitalShipPositonsInfo = [];
            let time = 0;
            for (const pointo of hosipitalShipPositon) {
                hosipitalShipPositonsInfo.push({ point: pointo, time: time });
                time += 0.5;
            }
            const hosipitalShipPath = new GV.Path(this.$cp.viewer);
            hosipitalShipPath.speed = 0.01;
            hosipitalShipPath.pathPositions = hosipitalShipPositonsInfo;
            time = 0;
            //回调函数加时间返回对应的医疗船模型的位置和姿态
            
            hosipitalShipPath.callback = (position, heading, pitch, roll) => {
                shipGroup.children[0].position = position;
                shipGroup.children[0].heading = heading;
                shipGroup.children[0].pitch = pitch;
                shipGroup.children[0].roll = roll;
                
            }
            let shipEntity = shipGroup.children[0];
            hosipitalShipPath.start();
            //let currentCenter = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
            let trackedEntity = function (){
                let center = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
                
                let lonLat = Cesium.Cartographic.fromCartesian(center);
                
                viewer.camera.setView({
                    destination:Cesium.Cartesian3.fromDegrees(lonLat.longitude / Math.PI * 180, lonLat.latitude / Math.PI * 180 - .2,7000),
                    orientation:{
                        heading:Cesium.Math.toRadians(0),
                        pitch:Cesium.Math.toRadians(-20),
                        roll:0
                    }
                })
            }
            viewer.scene.preUpdate.addEventListener(trackedEntity)
            setTimeout(()=>{viewer.scene.preUpdate.removeEventListener(trackedEntity)},this.pathPositions.length*.5*1000)
        },
        addPloygon(){
            //this.$cp.viewer.scene.globe.depthTestAgainstTerrain = true;
            axios.get('./data/伊春市.json').then((res)=>{
                res.data.features.forEach((item,index)=>{
                    if(item.properties.name==="铁力市"){
                        let arr1 = []
                        item.geometry.coordinates[0][0].forEach(itemc=>{
                            arr1.push(itemc[0],itemc[1]);
                        })
                        this.$cp.addPloygon('yili',arr1)
                    }
                    
                })
                
            })
        },
        //绑定点击事件
        handleLeftClick(entity) {
			this.addBoundInfoBox(entity.position._value, "gzinfoBox")
        },
        //点击显示详细信息
        addBoundInfoBox(positionValue, elementId) {
			const oneDiv = window.document.getElementById(elementId)
			oneDiv.style.display = 'block'
			this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
				let elWidth = oneDiv.offsetWidth
				let elHeight = oneDiv.offsetHeight // + 60
				const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
				let domPosition = positionValue
				const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
				if (Cesium.defined(canvasPosition)) {
					// 根据元素宽高及当前点屏幕坐标进行偏移
					oneDiv.style.top = canvasPosition.y - elHeight * 1.2 + 'px'
					oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
				}
			})
        },
        //关闭广告牌
        hiddenInfoBox(event) {
			//Object.keys
			event.currentTarget.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
        },
        //移除自定义信息框
		removeBoundInfoBox() {
			// // 移除元素
			// if (oldBoundInfoBox) {
			// 	oldBoundInfoBox.style.display = 'none'
			// 	oldBoundInfoBox = null
			// }
			// 移除监听事件
			if (this.preRenderListener) {
				this.preRenderListener()
				this.preRenderListener = null
			}
		},
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../assets/css/varibles.styl'
    .searchResult >>> .el-card__header .close
        float:right
    .searchResult >>> .el-card__header 
        background:#E8EBE8
    .eventDetail >>> .el-card__header .close
        float:right
    .eventDetail >>> .el-card__header 
        background:#E8EBE8
    .eventDetail >>> .el-table__header-wrapper
        display:none
    .searchResult
        position:absolute
        top:10px
        right:0
        z-index:10
        width: 500px
        display:block
        .box-card
            height:600px
    .searchItem
        display:flex
    .eventDetail
        display:block;
        position:absolute
        top:10px
        right:0
        z-index:10
        width: 500px
    .BoundInfoBox
        // position:fixed
        // right:1000px
		.infoBox-class
            min-width: vw(200)
            height: vh(40)
            display: none
            position: fixed
            background:#fff
            background: rgba(0, 13, 22, 0.5)
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5)
            border: 1px solid rgba(127, 255, 255, 0.25)
            //text-shadow: 0 0 10px rgba(0, 255, 255, 0.95)
            z-index: 10
            .close
                position: absolute;
                top: 10px;
                right: 20px;
                cursor: pointer
            .box-card
                background:#fff
                color:#000
                border:none
                height:vh(40)
                text-align:center
                font-family:cursive
                font-size:20px
                line-height:vh(0)
                // text-shadow:6px 2px 2px #333
                color:#000
                .item
                    position:relative
                    .itemTitle
                        color:#6CA5CF
                    .itemDetail
                        line-height:30px
                        div
                            span
                                color:#F5AF59
                    .itemThree
                        position:absolute
                        right:0
                        top:20px
                        color:#6CA5CF
                        line-height:25px
                .item:before
                    filter: url(#dilate10)
                .item:after
                    filter: url(#dilate6)
        .infoBox-class::before
            content: ''
            width: 0
            height: 0
            border: 10px solid
            position: absolute
            bottom: -20px
            left: 50%
            margin-left: -10px
            border-color:  #fff transparent transparent
		
                
			
</style>